import { List, TextareaItem, WhiteSpace, InputItem, Button, Picker, Flex, NoticeBar, Icon } from 'antd-mobile';
import { createForm } from 'rc-form';
import moment from 'moment';


const Item = List.Item;
const Brief = Item.Brief;

class LoginT extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        selected: false,
        ksfsm: '',
        zxjh: '',
        bkyxsm: '',
        bkzydm: '',
        schools: [],
        majors: [],
        plans: [],
      };

      if (this.props.data.length > 0) {
        this.selectEnroll(0);
      }
  }

  selectEnroll(idx) {
    let selected = this.props.data[idx];

    let schools = {};
    selected.schools.forEach(x => {
      schools[x.BKYXSM] = {label: x.BKYXSMC, value: x.BKYXSM};
    });

    this.setState({
      selected: idx,
      schools: Object.keys(schools).map(x => schools[x]),
      ksfsm: [selected.type],
      zxjh: '',
      bkyxsm: '',
      bkzydm: '',
      majors: [],
      plans: [],
    });
  }

  updateSchool(val) {

    let majors = [], ss = val[0];

    let selected = this.props.data[this.state.selected];

    majors = selected.schools.filter(x => x.BKYXSM == ss).map(x => { 
      return {label: x.BKZYMC, value: x.BKZYDM}; 
    });

    let s = new Map();
    majors.forEach(x => s.set(x.value, x));

    this.setState({majors: [...s.values()], bkyxsm: val});
  }

  updateMajor(val) {
    console.log("update major: " + val);
    let selected = this.props.data[this.state.selected], plans = [];

    selected.schools.forEach(x => { 
      if (x.BKZYDM === val[0]) {
        plans = Object.keys(x.plan).map(x => {
          return {label: this.props.translate.getLabel('zxjh', x), value: x}
        });
      }
    });

    this.setState({plans, bkzydm: val});
  }

  componentWillReceiveProps(nextProps){
    this.setState(Object.assign({}, this.state, {data: nextProps.data, record: nextProps.record}));
  }

  handleSubmit() {
    console.log("handleSubmit");

    console.log(this.state);

    let data = {};

    const keys = ["ksfsm", "zxjh", "bkyxsm", "bkzydm"];
    keys.forEach(x => {
      data[x] = (this.state[x].length > 0 ? this.state[x][0] : '');
    });

    if (this.state.selected !== false) {
      let selected = this.props.data[this.state.selected];
      data['enroll_id'] = selected.id;
    }

    this.props.onSubmit(data);
  }

  formatEnrollTime(idx) {
    let selected = this.props.data[idx],
      active_from = moment(selected.active_from, 'YYYY-MM-DD hh:mm:ss'),
      active_to = moment(selected.active_to, 'YYYY-MM-DD hh:mm:ss');


    return active_from.isValid() && active_to.isValid() ?
      active_from.format('M月D日') + ' - ' + active_to.format('M月D日') : '未指定';
  }

  render() {
    const name = this.props.nodeName;
    const { getFieldProps } = this.props.form;
    const studyType  = [ {value:'1',label:'全日制'},{value:'2',label:'非全日制'} ],
          examType = [ {value:'1',label:'夏令营考核'},{value:'2',label:'常规考核'} ],
          planType = [ {value:'0',label:'无专项计划'} ,{value:'4',label:'少数民族骨干计划'},{value:'7',label:'退役大学生计划'} ]

    let enrolls = this.props.data.map((x, i) => { return {label: x.name, value: i}});

    return (
      <div className={name}>
        <h2 className="step-title">{this.props.title}</h2>

        <WhiteSpace size="lg"/>

        <List>
          <Picker 
            data={enrolls} 
            cols={1}
            onChange = { v => { this.selectEnroll(v) }}
            value={ this.state.selected }
            className="forss">
            <List.Item arrow="horizontal">报名项目</List.Item>
          </Picker>
        </List>

        <WhiteSpace />

        {this.state.selected ? (
        <List>
            <List.Item extra={this.formatEnrollTime(this.state.selected)}>开营时间</List.Item>
        </List>
        ) : null}

        {this.state.selected ? (
        <WhiteSpace />
        ) : null}

        {this.state.selected ? (
        <List>
          <List.Item extra={this.props.translate.getLabel("ksfsm", this.state.ksfsm)}>考试方式码</List.Item>
          <input type="hidden" value={ this.state.ksfsm } name="ksfsm"></input>
        </List>
        ) : null}
        
        {this.state.selected ? (
        <WhiteSpace />
        ) : null}

        <List>
          <Picker 
            data={this.state.schools} 
            cols={1}
            onChange = { v => { this.updateSchool(v) }}
            value={ this.state.bkyxsm }
            className="forss">
            <List.Item arrow="horizontal">报考所属学院</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.bkyxsm } name="bkyxsm"></input>
        </List>

        <WhiteSpace />

        <List>
          <Picker 
            cols={1}
            data={this.state.majors}
            value={this.state.bkzydm}
            onChange = { v => this.updateMajor(v)}
            className="forss"
            extra="请先选择所属学院">
            <List.Item arrow="horizontal">报考专业名称</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.bkzydm } name="bkzydm"></input>
        </List>
        <WhiteSpace />


        {this.state.selected ? (
        <List>
          <Picker 
            data={this.state.plans}
            cols={1}  
            value={this.state.zxjh}
            onChange = { v => this.setState({ zxjh: v })}
            className="forss"
            extra="请先选择报考专业">
            <List.Item arrow="horizontal">专项计划</List.Item>
          </Picker>
          <input type="hidden" value={ this.state.zxjh } name="zxjh"></input>
        </List>
        ) : null}

        {this.state.selected ? (
        <WhiteSpace />
        ) : null}

        <Button className="btn" type="primary" onClick={()=>this.handleSubmit()}>提交</Button>

      </div>
    );
  }

}

const signUp = createForm()(LoginT);

export default signUp